<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Charts图表应用演示</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" href="docs/assets/css/normalize.css" media="screen">
    <link rel="stylesheet" type="text/css" href="docs/assets/css/bootstrap.min.css" media="screen">
    <link rel="stylesheet" type="text/css" href="docs/assets/css/frappe_theme.css" media="screen">
    <link rel="stylesheet" type="text/css" href="docs/assets/css/index.css" media="screen">
    <link rel="stylesheet" type="text/css" href="docs/assets/css/default.css" media="screen">

    <script src="docs/assets/js/highlight.pack.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
    <script async defer src="dist/buttons.js"></script>

</head>
<body>

<div class="container">
    <div class="row hero" style="padding-top: 30px; padding-bottom: 0px;">
        <div class="jumbotron" style="background: transparent;">
            <h1>图表展示</h1>
        </div>
        <div class="col-md-4" style="font-size: 14px;">
            <div id="chart-composite-1" class="border">
                <svg height=225></svg>
            </div>
            <p class="mt-1">Click or use arrow keys to navigate data points</p>
        </div>
        <div class="col-md-4" style="font-size: 14px;">
            <div id="chart-composite-2" class="border">
                <svg height=225></svg>
            </div>
        </div>
        <div class="col-md-4">
            <div class="dashboard-section">
                <div class="row">
                    <div class="col-sm-8">
                        <div id="chart-events" class="border"></div>
                    </div>
                    <div class="col-sm-4">
                        <div class="chart-events-data" class="border data-container">
                            <div class="image-container border">
                                <img class="moon-image" src="docs/assets/img/europa.jpg">
                            </div>
                            <div class="data margin-vertical-px">
                                <h6 class="moon-name">Europa</h6>
                                <p>Semi-major-axis: <span class="semi-major-axis">671034</span> km</p>
                                <p>Mass: <span class="mass">4800000</span> x 10^16 kg</p>
                                <p>Diameter: <span class="diameter">3121.6</span> km</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="group later">
        <div class="row section">
            <div class="col-md-4">
                <div class="dashboard-section">
                    <h6 class="margin-vertical-rem">
                        Listen to state change
                    </h6>
                    <div id="chart-aggr" class="border"></div>
                    <div class="btn-group aggr-type-buttons margin-vertical-px mx-auto" role="group">
                        <button type="button" class="btn btn-sm btn-secondary active" data-type='axis-mixed'>Mixed
                        </button>
                        <button type="button" class="btn btn-sm btn-secondary" data-type='pie'>Pie Chart</button>
                        <button type="button" class="btn btn-sm btn-secondary" data-type='percentage'>Percentage Chart
                        </button>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="dashboard-section">
                    <h6 class="margin-vertical-rem">
                        Update Values
                    </h6>
                    <div id="chart-update" class="border"></div>
                    <div class="chart-update-buttons mt-1 mx-auto" role="group">
                        <button type="button" class="btn btn-sm btn-secondary" data-update="random">Random Data</button>
                        <button type="button" class="btn btn-sm btn-secondary" data-update="add">Add Value</button>
                        <button type="button" class="btn btn-sm btn-secondary" data-update="remove">Remove Value
                        </button>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="dashboard-section">
                    <h6 class="margin-vertical-rem">
                        Plot Trends
                    </h6>
                    <div id="chart-trends" class="border"></div>
                    <div class="btn-group chart-plot-buttons mt-1 mx-auto" role="group">
                        <button type="button" class="btn btn-sm btn-secondary" data-type="hideDots">Line</button>
                        <button type="button" class="btn btn-sm btn-secondary" data-type="hideLine">Dots</button>
                        <button type="button" class="btn btn-sm btn-secondary active" data-type="heatline">HeatLine
                        </button>
                        <button type="button" class="btn btn-sm btn-secondary" data-type="regionFill">Region</button>
                    </div>
                </div>
            </div>


        </div>
    </div>

</div>

<script src="docs/assets/js/frappe-charts.min.js"></script>
<script src="docs/assets/js/index.js"></script>

<div style="text-align:center;clear:both;">
    <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
    <script src="/follow.js" type="text/javascript"></script>
</div>

</body>
</html>